﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomerLogin.aspx.cs" Inherits="CustomerLogin" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Avanto Home</title>
    <link rel="stylesheet" type="text/css" href="avantoClassic/css/2444a6c75c026683184e1ebf7a3c4941.css"
        media="all" />
    <script src="JS/Plugins/jquery-1.9.1.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/CustomerFormStyle.css" type="text/css" media="screen" />
    <script type="text/javascript" src="JS/CustomerSlidingform.js"></script>
    <script type="text/javascript" src="JS/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="JS/sexyalertbox.v1.2.jquery.js"></script>


    <script type="text/javascript">

        function ShowAvailability() {           

            $.ajax({            

                type: "POST",

                url: "CustomerLogin.aspx/CheckUserName",

                data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',                

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: OnSuccess,

                failure: function (response) {

                    alert(response);

                }

            });

        }

        function OnSuccess(response) {

            var mesg = $("#mesg")[0];



            switch (response.d) {

                case "true":

                    mesg.style.color = "green";

                    mesg.innerHTML = "Available";

                    break;

                case "false":

                    mesg.style.color = "red";

                    mesg.innerHTML = "Not Available";

                    break;

                case "error":

                    mesg.style.color = "red";

                    mesg.innerHTML = "Error";

                    break;

            }

        }

        function OnChange(txt) {

            $("#mesg")[0].innerHTML = "";

        }

    </script>
    <link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css" />
    <%-- <script type="text/javascript">
        function test() {
            Sexy.prompt('<h1>Registro de usuarios</h1>Ingresa tu nombre para poder identificarte en el sistema.', 'Eduardo', { onComplete:
      function (returnvalue) {
          if (returnvalue) {
              Sexy.confirm('<h1>Bienvenido ' + returnvalue + ',</h1><p>¿Deseas ver el about us?</p><p>Pulsa "Ok" para continuar, o pulsa "Cancelar" para salir.</p>', { onComplete:
            function (returnvalue) {
                if (returnvalue) {
                    Sexy.info('<h1>SexyAlertBox</h1><em>versión 1.2</em><br/><p>&copy;2008-2009 Todos los derechos reservados.</p><p>Sexy Alert Box está basado en PBBAcpBox.</p><p>Visita <a href="http://www.coders.me/">www.coders.me</a> para obtener la última versión de este script.</p>');
                }
                else {
                    Sexy.alert('<h1>SexyAlertBox</h1><em>versión 1.2</em><br/><p>No te olvides de visitar <a href="http://www.coders.me/">www.coders.me</a> está lleno de artículos de programación.</p>');
                }
            }
              });
          }
          else {
              Sexy.error('<h1>Error al intentar entrar al sistema</h1><p>Para continuar, debes ingresar un nombre en la casilla de Nombre.</p><p>Inténtalo de nuevo.</p>');
          }
      }
            });
        }
    </script>--%>
    <script type="text/javascript">

        function savecustomerinfo() {


            var jdata = {};
            jdata.username = $('#username').val();
            jdata.password = $('#password').val();
            jdata.cpassword = $('#cpassword').val();
            jdata.firstname = $('#firstname').val();
            jdata.lastname = $('#lastname').val();
            jdata.mobile = $('#mobile').val();
            jdata.email = $('#email').val();
            jdata.address1 = $('#address1').val();
            jdata.address2 = $('#address2').val();
            jdata.state = $('#state').val();
            jdata.country = $('#country option:selected').val();


            $.ajax({

                type: "POST",
                url: "SalesUserService.svc/saveCustomerInformation",
                data: JSON.stringify(jdata),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var Result = eval('(' + response.d + ')');
                    alert(Result["Message"]);
                    alert("The customer ID is " + Result["Confirmation"] + " Please make a note of it ");
                    window.location = "Home.aspx";

                },
                failure: function (msg) {
                    alert(msg);
                },
                error: function (jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].');
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        alert('Time out error.');
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.');
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }

            });
            return false;


        }
    
    </script>
    <style>
        span.reference
        {
            position: fixed;
            left: 5px;
            top: 5px;
            font-size: 10px;
            text-shadow: 1px 1px 1px #fff;
        }
        span.reference a
        {
            color: #555;
            text-decoration: none;
            text-transform: uppercase;
        }
        span.reference a:hover
        {
            color: #000;
        }
        h1
        {
            color: #ccc;
            font-size: 36px;
            text-shadow: 1px 1px 1px #fff;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="page">
            <div class="header-container">
                <div class="header">
                    <h2 class="logo">
                        <a href="Home.aspx" class="logo">
                            <img src="avantoClassic/images/logo.gif" alt="Avanto Ecommerce Product"></a></h2>
                    <div class="quick-access">
                        <ul class="links">
                            <%--<li class="first"><a href="#" title="My Account">Login/Register</a></li>--%>
                            <li><a href="Home.aspx" title="My Wishlist" class="top-link-wishlist">Home</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="home_page_header_block">
                <div id="content">
                    <h1>
                        Customer Registration Form</h1>
                    <div id="wrapper">
                        <div id="steps">
                            <form id="formElem" name="formElem" action="" method="post" runat="server">
                            <fieldset class="step">
                                <legend>Account</legend>
                                <p>
                                <%--<input id="username" name="username" style="width:100px"/>--%>
                                    <label for="username">
                                        User name</label>
                                    <asp:TextBox ID="txtUserName" runat="server" onkeyup="OnChange(this)" Width="100px"></asp:TextBox>
                                    <input id="btnCheck"
                                        type="button" value="Show Availability" onclick="ShowAvailability()" style="float: left;
                                        width: 110px" />
                                    <br />
                                    <span id="mesg"></span>
                                </p>
                                <%-- <p>
                                    <label for="email">
                                        Email</label>
                                    <input id="email" name="email" placeholder="info@tympanus.net" type="email" autocomplete="OFF" />
                                </p>--%>
                                <p>
                                    <label for="password">
                                        Password</label>
                                    <input id="password" name="password" type="password" autocomplete="OFF" />
                                </p>
                                <p>
                                    <label for="cpassword">
                                        Confirm Password</label>
                                    <input id="cpassword" name="cpassword" type="password" autocomplete="OFF" />
                                </p>
                            </fieldset>
                            <fieldset class="step">
                                <legend>Personal Details</legend>
                                <p>
                                    <label for="name">
                                        Firstname</label>
                                    <input id="firstname" name="firstname" type="text" autocomplete="OFF" />
                                </p>
                                <p>
                                    <label for="country">
                                        Lastname</label>
                                    <input id="lastname" name="lastname" type="text" autocomplete="OFF" />
                                </p>
                                <p>
                                    <label for="mobile">
                                        Mobile</label>
                                    <input id="mobile" name="mobile" type="tel" autocomplete="OFF" />
                                </p>
                                <p>
                                    <label for="email">
                                        Email</label>
                                    <input id="email" name="email" placeholder="yourid@xxx.com" type="tel" autocomplete="OFF" />
                                </p>
                            </fieldset>
                            <fieldset class="step">
                                <legend>Country</legend>
                                <p>
                                    <label for="address1">
                                        Address 1</label>
                                    <input id="address1" name="address1" type="text" autocomplete="OFF" />
                                </p>
                                <p>
                                    <label for="address2">
                                        Address 2</label>
                                    <input id="address2" name="address2" type="text" autocomplete="OFF" />
                                </p>
                                <p>
                                    <label for="state">
                                        State</label>
                                    <input id="state" name="state" type="text" autocomplete="OFF" />
                                </p>
                                <p>
                                    <label for="country">
                                        Country</label>
                                    <select id="country" name="country">
                                        <option>CANADA</option>
                                        <option>INDIA</option>
                                        <option>USA</option>
                                    </select>
                                </p>
                            </fieldset>
                            <fieldset class="step">
                                <legend>Confirm</legend>
                                <p>
                                    Everything in the form was correctly filled if all the steps have a green checkmark
                                    icon. A red checkmark icon indicates that some field is missing or filled out with
                                    invalid data. In this last step the user can confirm the submission of the form.
                                </p>
                                <p class="submit">
                                    <button id="registerButton" onclick="return savecustomerinfo();" type="submit">
                                        Register</button>
                                </p>
                            </fieldset>
                            </form>
                        </div>
                        <div id="navigation" style="display: none;">
                            <ul>
                                <li class="selected"><a href="#">Account</a> </li>
                                <li><a href="#">Personal Details</a> </li>
                                <li><a href="#">Contact Details</a> </li>
                                <li><a href="#">Confirm</a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="footer-container">
                    <div class="footer">
                        <ul class="links">
                            <li class="first"><a href="#" title="Site Map">Site Map</a></li>
                            <li><a href="#" title="Search Terms">Search Terms</a></li>
                            <li><a href="#" title="Advanced Search">Advanced Search</a></li>
                            <li class=" last"><a href="#" title="Contact Us">Contact Us</a></li>
                        </ul>
                        <address>
                            © 2013 Kaizen Technosoft
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
